package myJs.changePassword

import myJs.CpLayer
import myJs.cps.{PureInputCp, Style}
import myJs.myPkg.jquery.$
import org.scalajs.dom.html
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.React
import slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.Dynamic.{global => g}
import myJs.Implicits._
import myJs.myPkg.{MyFetch, NavigateOptions, ReactRouterDOM}
import myJs.tool.Tool
import org.scalajs.dom.window.localStorage

import scala.scalajs.js.JSON
import scala.concurrent.ExecutionContext.Implicits.global

/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  val curPage = ChangePassword
  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val formRef = React.createRef[html.Form]
    val (info, setInfo) = useState("")
    val navigate = ReactRouterDOM.useNavigate()

    object FTool{

      def bootStrapValidator = {
        val formJq = $(formRef.current)
        val dict: js.Dictionary[js.Any]  = js.Dictionary(
          "feedbackIcons" -> js.Dictionary(
            "valid" -> "glyphicon glyphicon-ok",
            "invalid" -> "glyphicon glyphicon-remove",
            "validating" -> "glyphicon glyphicon-refresh",
          ),
          "fields" -> js.Dictionary(
            "password" -> js.Dictionary(
              "validators" -> js.Dictionary(
                "notEmpty" -> js.Dictionary(
                  "message" -> "密码不能为空！"
                ),
              )
            ),
            "newPassword" -> js.Dictionary(
              "validators" -> js.Dictionary(
                "notEmpty" -> js.Dictionary(
                  "message" -> "新密码不能为空！"
                ),
                "identical" -> js.Dictionary(
                  "field" -> "newPasswordAgain",
                  "message" -> "两次密码不一样!"
                ),
              )
            ),
            "newPasswordAgain" -> js.Dictionary(
              "validators" -> js.Dictionary(
                "notEmpty" -> js.Dictionary(
                  "message" -> "确认密码不能为空！"
                ),
                "identical" -> js.Dictionary(
                  "field" -> "newPassword",
                  "message" -> "两次密码不一样!"
                ),
              )
            ),
          )
        )
        formJq.bootstrapValidator(dict)
      }

      def changePassword = () => {
        val formJq=$(formRef.current)
        val bv = formJq.bv
        bv.validate()
        val valid = bv.isValid()
        if (valid) {
          val data=formJq.serialize()
          val account=Tool.getAccount
          val url = "http://localhost:9000/panda/app/changePassword"
          MyFetch.post(url = s"${url}", data = s"${data}&account=${account}", headers = Map("Content-Type" -> "application/x-www-form-urlencoded"),
          ).map { any =>
            val valid = any.toJDJAn("valid").toB
            if (valid) {
              navigate("/",options = NavigateOptions(state = js.Dictionary("message"->"密码修改成功！")))
            } else {
              setInfo("密码错误！")
            }
          }
        }
        ()
      }


    }

    useEffect(() => {
      FTool.bootStrapValidator
    }, List()
    )

    CpLayer(title = curPage.titleStr)(
      div(className := "page-content",
        div(className := "row-fluid",
          div(className := "row",
            div(className := "col-md-12 col-sm-12",
              div(className := "portlet light",
                div(className := "portlet-body",

                  div(className := "register",
                    div(className := "page-heading",
                      h2(className := "col-sm-offset-1", style := Style(fontSize = "25px"), "修改密码")
                    ),
                    form(id := "form", className := "registration-form form-horizontal", method := "post",
                      style := Style(marginTop = "30px"),ref:=formRef,

                      div(className := "col-sm-offset-5",
                          span(style := Style(lineHeight = "35px"), className := "error", info),
                      ),



                      div(className := "form-group",
                        label(className := "control-label col-sm-5", "旧密码:"),
                        div(className := "col-sm-3",
                          div(className := "input-group",
                            span(className := "input-group-addon",
                              em(className := "fa fa-key icon2x")
                            ),
                            PureInputCp(name = "password", placeHolder = "旧密码", `type` = "password")
                          )
                        )
                      ),

                      div(className := "form-group",
                        label(className := "control-label col-sm-5", "新密码:"),
                        div(className := "col-sm-3",
                          div(className := "input-group",
                            span(className := "input-group-addon",
                              em(className := "fa fa-key icon2x")
                            ),
                            PureInputCp(name = "newPassword", placeHolder = "新密码", `type` = "password")
                          )
                        )
                      ),

                      div(className := "form-group",
                        label(className := "control-label col-sm-5", "再次确认新密码:"),
                        div(className := "col-sm-3",
                          div(className := "input-group",
                            span(className := "input-group-addon",
                              em(className := "fa fa-key icon2x")
                            ),
                            PureInputCp(name = "newPasswordAgain", placeHolder = "再次确认新密码", `type` = "password")
                          )
                        )
                      ),

                      div(className := "form-group",
                        div(className := "actions col-sm-offset-5 col-sm-3",
                          button(`type` := "button", className := "btn btn-primary btn-lg",
                            style := Style(width = "100%"),onClick:=FTool.changePassword,"确认修改")
                        )
                      )

                    )
                  )

                ),
              )
            )
          )
        )
      )

    )

  }


}
